import './index.scss'
import { Layout, Menu } from 'antd'
import { useNavigate } from 'react-router-dom'
import { lazy, Suspense, useState } from 'react'
import { useTitle, useFavicon } from 'ahooks'


import AdminHtmlTemp from '../Template/AdminHtmlTemp'
import AdminTableTemp from '../Template/AdminTableTemp'


const { Header, Content, Footer } = Layout
const { imageUrl } = window
const Loading = lazy(() => import('../Views/LoadSvg'))

const items = [
    { key: 'CommonHome', label: '首页', type: 'html' },
    { key: 'ProjectMenu', label: '项目菜单', type: 'table' },
    { key: 'WeChartMenu', label: '小程序菜单', type: 'table' },
    { key: 'ProjectCommon', label: '项目配置', type: 'table' },
    { key: 'Mars3dScene', label: '通用场景', type: 'html' },
]

const CommonPage = () => {
    const Navigate = useNavigate()
    useTitle('公共版本库')
    useFavicon(imageUrl + 'Ico.ico')
    const [SelectKeys, setSelectKeys] = useState('ProjectCommon')
    return (
        <Suspense fallback={<Loading style={{ '--background': 'transparent', '--stroke': '#212121', height: '100%' }} />} >
            <Layout className='CommonPage'>
                <Header style={{ display: 'flex', alignItems: 'center' }}>
                    <Menu
                        theme="dark"
                        mode="horizontal"
                        selectedKeys={[SelectKeys]}
                        items={items}
                        style={{ flex: 1 }}
                        onSelect={({ key }) => setSelectKeys(key)}
                    />
                    <div className='CommonPage_outSign' onClick={() => Navigate('/')}>退出</div>
                </Header>
                <Content style={{ padding: '16px 16px 0 16px' }}>
                    <div className='CommonPage__Content'>
                        {(() => {
                            const { type, label } = items.find(v => v.key === SelectKeys)
                            return type === 'html' ?
                                <AdminHtmlTemp key={new Date()} url={SelectKeys} title={label} /> :
                                <AdminTableTemp key={new Date()} url={SelectKeys} title={label} />
                        })()}
                    </div>
                </Content>
                <Footer style={{ textAlign: 'center' }}>智慧工地 ©{new Date().getFullYear()} Created by NaN</Footer>
            </Layout>
        </Suspense>
    );
};

export default CommonPage;